<template>
    <div class="todo-container">
      <h1>Todo List</h1>
      <TodoInput @add-todo="addTodo" />
      <ul>
        <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" :index="index" @remove-todo="removeTodo" />
      </ul>
      <p v-if="remainingTodos === 0">All tasks are completed!</p>
      <p v-else>{{ remainingTodos }} tasks remaining.</p>
      <TodoClearButton @clear-todos="clearTodos" />
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import TodoInput from './TodoInput.vue';
import TodoItem from './TodoItem.vue';
import TodoClearButton from './TodoClearButton.vue';

const todos = ref([]);

const remainingTodos = computed(() => {
  return todos.value.length;
});

function addTodo(todo) {
  todos.value.push(todo);
}

function removeTodo(index) {
  todos.value.splice(index, 1);
}

function clearTodos() {
  todos.value = [];
}

console.log('TodoList component is mounted');
</script>

<style scoped>

.todo-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}

p {
  /* margin-top: 20px; */
  font-size: 18px;
}
</style>